<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>EnjoyToShare - Player</title>
    <link rel="icon" href="./images/favicon.ico">
    <!-- 样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" type="text/css" href="font/css/all.css" />
    <link rel="stylesheet" href="./css/me.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
</head>

<body>
    <div class="main">
        <div class="ui container"><!--container容器带有响应式的效果-->
        <!-- 2.挂载的html结构 -->
        <!-- 播放器主体区域 -->
        <div class="play_wrap" id="player" v-cloak>
            <div class="search">
                <div class="m-mobile-hide"><img src="images/player_title.png" alt="" /></div>
                <!-- 搜索歌曲 -->
                <input type="text" v-model="query" @keyup.enter="searchMusic" />
            </div>
            <!-- 搜索歌曲列表 -->
            <div class='song_wrapper_mobile m-mobie-show'>
                <ul class="song_list">
                    <li v-for="item in musicList">
                        <a class="fas fa-play" href="javascript:;" @click="playMusic(item.id)"></a>
                        <b>{{ item.name }}</b>
                        <a class="fab fa-youtube" href="javascript:;"  @click="playMV(item.mvid)" v-if="item.mvid!=0"></a>
                    </li>
                </ul>
            </div>
            <div class="center_con m-mobile-hide">
                <!-- 搜索歌曲列表 -->
                <div class='song_wrapper'>
                    <ul class="song_list">
                        <li v-for="item in musicList">
                            <a class="fas fa-play" href="javascript:;" @click="playMusic(item.id)"></a>
                            <b>{{ item.name }}</b>
                            <a class="fab fa-youtube" href="javascript:;"  @click="playMV(item.mvid)" v-if="item.mvid!=0"></a>
                        </li>
                    </ul>
                </div>
                <div class="m-mobile-hide"><img src="images/line.png" class="leftline" alt=""></div>
                <!-- 歌曲信息容器 -->
                <div class="player_con m-mobile-hide" :class="{playing:isPlaying}">
                   <!-- <img src="images/player_bar.png" class="play_bar" />-->
                    <img :src="playerCoverImage" class="play_bar" />
                    <!-- 黑胶碟片 -->
                    <img src="images/disc.png" class="disc autoRotate" />
                    <!--<img src="images/cover.png" class="cover autoRotate" />-->
                    <img :src="musicCover==''?'./images/cover.png':musicCover" class="cover autoRotate" />
                </div>
                <div class="m-mobile-hide"><img src="images/line.png" class="rightline"></div>
                <!-- 评论容器 -->
                <div class="comment_wrapper m-mobile-hide">
                    <h5 class='title' v-show="hotComments.length!=0">热门评论</h5>
                    <div v-show="hotComments.length!=0" class='comment_list'>
                        <dl v-for="item in hotComments">
                          <dt><img :src="item.user.avatarUrl" alt=""></dt>
                          <dd class="name">{{ item.user.nickname }}</dd>
                          <dd class="id">ID：{{item.user.userId}}</dd>
                          <dd class="detail">{{ item.content}}</dd>
                      </dl>
                    </div>
                    <div v-show="hotComments.length==0" class="introduction">
                        <h3>使用说明</h3>
                        <p>搜索栏输入关键字即可查询歌曲</p>
                        <p>点击歌曲左侧按钮即可播放歌曲</p>
                        <p>点击歌曲右侧按钮即可播放 MV</p><br /><br />
                        <p>　　VPlayer 传送门</p><br />
                        <p>我的博客：<a href="https://wugenqiang.gitee.io">EnjoyToShare </a></p>
                        <p>学习笔记：<a href="https://wugenqiang.gitee.io/cs-notes">CS-NoteS </a></p><br />
                        <p>
                            <i class="fab fa-vuejs"></i><a href="https://wugenqiang.gitee.io/cs-notes/#/frontend/vue-base-notes">Vue-NoteS </a>
                            <i class="fab fa-vuejs"></i>
                        </p>
                    </div>
                </div>
            </div>
            <div class="audio_con">
                <audio ref='audio'  :src="musicUrl"  @play="play" @pause="pause" controls autoplay loop class="myaudio"></audio>
            </div>
            <div class="video_con" v-show="isMv">
                <video :src="mvUrl" controls="controls"></video>
                <div class="mask" @click="closeMv" ></div>
            </div>
        </div>
        </div>
    </div>
    <!-- 1.开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 4.官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 5.调用创建的Vue实例-->
    <script src="./js/player.js"></script>

    <!--使用 Gitter 实现一个 IM 即时通讯聊天室功能-->
    <script>
        ((window.gitter = {}).chat = {}).options = {
            room: 'enjoytoshare/community'
        };
    </script>
    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

</body>

</html>